<template>
	<div class="flex relative justify-between w-11/12 h-100 mx-auto">
		<div class="div__border w-3/10 h-full" ref="leftRef"></div>
		<div class="div__border w-3/10 h-full" ref="rightRef"></div>
		<Button></Button>
	</div>
</template>

<script>
import Button from '@/components/button.vue'

export default {
	components: {
		Button
	},
	data() {
		return {
			leftLineCharts: null,
			rightLineCharts: null,
			leftData: {
				text: '人数变化',
				yData: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
				xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
				yData1: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
			},
			rightData: {
				text: '数据可视化',
				name: '数据可视化2',
				name2: '数据可视化3',
				xData: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'],
				yData: [30, 40, 30, 40, 30, 50, 60, 20, 10, 50, 40, 56, 30, 45, 50, 30, 30, 55, 30, 28, 54, 60, 40, 20, 45, 54, 55, 33, 54, 65],
				yData1: [50, 30, 50, 20, 10, 30, 30, 60, 50, 30, 20, 40, 40, 45, 43, 20, 10, 54, 43, 54, 43, 23, 20, 40, 55, 44, 54, 32, 18, 43]
			}
		}
	},
	mounted() {
		this.init()
		this.leftCharts(this.leftData.xData, this.leftData.yData, this.leftData.yData1)

		this.init(this.rightData.text)
		this.rightCharts(this.rightData.xData, this.rightData.yData, this.rightData.yData1)
	},
	destroyed() {},
	methods: {
		init() {
			this.leftLineCharts = this.$echarts.init(this.$refs.leftRef)
			this.rightLineCharts = this.$echarts.init(this.$refs.rightRef)
			const INIT_OPTION = {
				title: {
					textStyle: {
						color: 'white',
						fontFamily: '微軟正黑體',
						fontWeight: 'lighter'
					},
					left: '3%',
					top: '3%'
				},
				grid: {
					show: false,
					left: '12%',
					top: '17%',
					bottom: '8%',
					right: 25
				},
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						color: 'white'
					}
				},
				yAxis: {
					type: 'value',
					scale: true,
					axisLabel: {
						color: 'white'
					},
					splitLine: {
						show: false
					}
				},
				series: [
					{
						type: 'line',
						markPoint: {
							data: [{ type: 'max' }, { type: 'min' }]
						},
						markLine: {
							data: [{ type: 'average' }]
						}
					},
					{
						type: 'line',
						markPoint: {
							data: [{ type: 'max' }, { type: 'min' }]
						},
						markLine: {
							data: [{ type: 'average' }]
						}
					}
				]
			}
			this.leftLineCharts.setOption(INIT_OPTION)
			this.rightLineCharts.setOption(INIT_OPTION)
		},
		leftCharts(xdata, ydata, ydata1) {
			const LEFT_OPTION = {
				title: {
					text: '人数变化'
				},
				legend: {
					data: ['新增粉丝', '新增游客'],
					textStyle: {
						color: 'white'
					},
					right: '3%',
					top: '3%'
				},
				xAxis: {
					data: xdata
				},
				series: [
					{
						name: '新增粉丝',
						data: ydata,
						stack: true,
						smooth: true
					},
					{
						name: '新增游客',
						data: ydata1,
						stack: true,
						smooth: true
					}
				]
			}
			this.leftLineCharts.setOption(LEFT_OPTION)
			window.onresize = this.leftLineCharts.reisze
		},
		rightCharts(xdata, ydata, ydata1) {
			const RIGHT_OPTION = {
				title: {
					text: '播放量'
				},
				legend: {
					data: ['播放量', '转发量'],
					textStyle: {
						color: 'white'
					},
					right: '3%',
					top: '3%'
				},
				xAxis: {
					data: xdata
				},
				yAxis: {
					splitLine: {
						lineStyle: {
							color: 'white'
						}
					}
				},
				series: [
					{
						name: '播放量',
						data: ydata,
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 1,
								x1: 0,
								y1: 0,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(1, 132, 213, .4)'
									},
									{ offset: 1, color: 'rgba(1, 132, 213, .1)' }
								]
							}
						},
						lineStyle: {
							color: '#0184d5',
							width: 2
						},
						symbol: 'circle',
						showSymbol: false
					},
					{
						name: '转发量',
						data: ydata1,
						smooth: true,
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 1,
								x1: 0,
								y1: 0,
								colorStops: [
									{
										offset: 0,
										color: 'rgba(0, 216, 135, .4)'
									},
									{ offset: 0.8, color: 'rgba(0, 216, 135, .1)' }
								]
							}
						},
						lineStyle: {
							color: '#00d887',
							width: 2
						},
						symbol: 'circle',
						showSymbol: false
					}
				]
			}
			this.rightLineCharts.setOption(RIGHT_OPTION)
			width.onresize = this.rightLineCharts.reisze
		}
	}
}
</script>

<style></style>
